<template>
  <div v-if="!column.children" class="m-td" :style="setWidth(column)">
    <div @contextmenu="contextmenuHandler" :title="row[column.dataIndex]">
      <span v-if="!column.scopedSlots">{{ row[column.dataIndex] }}</span>
      <slot v-else v-bind:scope="{ row, column, index }" name="action"></slot>
    </div>
  </div>
  <div class="has-children-td" :style="setWidth(column)"  v-else>
    <m-td
      v-for="(td, Index) in column.children"
      :key="Index"
      :column="td"
      :row="row"
      :index="index"
    ></m-td>
  </div>
</template>

<script>
export default {
  name: "MTd",
  props: {
    column: {
      type: Object,
      required: true,
    },
    row: {
      type: Object,
      required: true,
    },
    index: {
      type: Number,
      required: true,
    },
  },
  inject: ["setWidth"],
  data() {
    return {
      copyStutas: true,
    };
  },
  methods: {
    // 右键全选复制
    contextmenuHandler(e) {
      if (this.copyStutas) {
        e.preventDefault(); //取消默认事件
        this.copyStutas = false;
      } else {
        this.copyStutas = true;
      }
      let text;
      if (window.getSelection) {
        //window.getSelection 方法会返回一个选中对象    具体自行百度
        text = window.getSelection();
      } else if (document.selection) {
        // document.selection 获取选中dom节点   createRange 方法是创建一个选中光标      此处为了兼容所有浏览器
        text = document.selection.createRange();
      }
      text.selectAllChildren(e.currentTarget); // 选中所有的内容
      document.execCommand("Copy"); // 将选中的内容增加到复制板中     execCommand 方法是执行一个对当前文档/当前选择/给出范围的命令  该方法非常强大，有很多作用。具体自行百度
    },
  },
};
</script>

<style lang="scss" scoped>
.m-td {
  padding: 0 12px;
  line-height: 50px;
  border-right: 1px solid #ccc;
  height: 50px;
  > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.has-children-td{
  width:100%;
  display: flex;
  .m-td{
    flex:1
  }
}
</style>
